<style lang="less" scoped>
    .container {
        margin-top:3rem;
    }
    .scene-div-add{
        display: flex;
        align-items: center;
        padding: 1rem;
        border-bottom: solid 1px #f4f4f4;
        .scene-input{
            height: 80%;
            font-size: 1rem;
            flex-grow: 1;
            margin-right: 1rem;
            outline-color:  #09BB07;
            padding: 0.3rem;
        }
        .scene-add-btn{
            background-color:  #09BB07;
            color: white;
            border: none;
            outline: none;
            padding: 0.4rem 0.6rem;
            border-radius: 0.2rem;
        }
    }
    .scene-list{
        .scene-item{
            .item-content{
                padding: 0.9rem;
                border-bottom: solid 1px #f4f4f4;
                display: flex;
                align-items: center;
                .item-content-icon{
                    fill: #09BB07;
                }
                .item-content-name{
                    margin-left: 1rem;
                    font-size: 1.2rem;
                }
            }
        }

    }
</style>
<template>
    <div>
        <x-header style="width:100%;position:fixed;left:0;top:0;z-index:100;">
            <span>设备场景</span>
            <x-icon slot="overwrite-left" @click="back" type="ios-arrow-back" size="35"
                    style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
        </x-header>
        <div class="container">
            <div class="scene-div-add">
                <input class="scene-input" v-model="sceneName" type="text">
                <button class="scene-add-btn" @click="addScene">添加</button>
            </div>
            <div class="scene-list">
                <swipeout>
                    <!--<div class="scene-item" >-->
                        <swipeout-item  @click.native="goSceneSwitch(scene)" class="scene-item" :right-menu-width="210" :sensitivity="15" :key="scene.id" v-for="scene in sceneList">

                            <div slot="right-menu">
                                <swipeout-button @click.native.stop="confirmDelete(scene)" type="primary">删除</swipeout-button>
                                <!--<swipeout-button @click.native="onButtonClick('delete')" type="warn">{{$t('Delete')}}</swipeout-button>-->
                            </div>

                            <div slot="content" class="item-content">
                                <x-icon class="item-content-icon" type="social-codepen" size="30"></x-icon>
                                <span class="item-content-name">{{scene.name}}</span>
                            </div>
                        </swipeout-item>
                    <!--</div>-->
                </swipeout>
            </div>

        </div>
    </div>
</template>


<script>
    import {Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'
    import { Confirm } from 'vux'
    export default{
        data(){
            return {
                sceneList: [],
                sceneName:''
            }
        },
        components: {
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
            Confirm
        },
        computed: {},
        methods: {
            back(){
                this.$router.back();
            },
            getScene(){
                this.$store.dispatch('GetSceneList').then((data) => {
                    if (data.status == 1) {
                        this.sceneList = data.result;
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }
                }).catch((err) => {
                });
            },
            addScene(){
                if(this.sceneName.length <1){
                    return;
                }
                let data= {
                    name:this.sceneName
                }
                this.$store.dispatch('AddScene',data).then((data) => {
                    if (data.status == 1) {
                        this.getScene();
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }
                }).catch((err) => {
                });
                this.sceneName = "";
            },
            confirmDelete(scene){
                this.$vux.confirm.show({
                    title:"确定删除",
                    onCancel:()=>{
                    },
                    onConfirm :()=> {
                       this.deleteScene(scene);
                    }
                })
            },
            deleteScene(scene){
                this.$store.dispatch('DeleteScene',scene.id).then((data) => {
                    if (data.status == 1) {
                        this.getScene();
                    }else {
                        this.$vux.toast.text('失败', 'bottom');
                    }
                }).catch((err) => {
                });
            },
            goSceneSwitch(scene){
                this.$router.push({path:'/sceneSwitch/'+scene.id})
            }
        },
        created: function () {
            this.getScene();
        }
    }
</script>
